﻿<!DOCTYPE html>

<html>
<head>
<title></title>
<script type="text/javascript">
    function draw() {
        var canvas = document.getElementById("Canvas1");
        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");
            for (i = 0; i < 4; i++) {
                for (j = 0; j < 4; j++) {
                    ctx.beginPath();
                    var x = 25 + j * 50;               // x coordinate
                    var y = 25 + i * 50;               // y coordinate
                    var radius = 20;                    // Arc radius
                    var startAngle = 0;                     // Starting point on circle
                    var endAngle = Math.PI * (2 - j / 2);   // End point on circle
                    var anticlockwise = i % 2 == 0 ? false : true; // clockwise or anticlockwise

                    ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

                    if (i > 1) {
                        ctx.fill();
                    } else {
                        ctx.stroke();
                    }
                }
            }
        }
    }
    window.onload = draw;
</script>
</head>
<body>
    <canvas id="Canvas1" width="200" height="200"></canvas>
    <div>
    arc(x, y, radius, startAngle, endAngle, anticlockwise)<br />
    arc方法接受五个参数：x，y 是圆心坐标，radius 是半径，startAngle 和 endAngle 分别是起末弧度（以 x 轴为基准），anticlockwise 为 true 表示逆时针，反之顺时针。
    <br />
    注意：arc 方法里用到的角度是以弧度为单位而不是度。度和弧度直接的转换可以用这个表达式：var radians = (Math.PI/180)*degrees;。
    </div>
</body>
</html>
